<template>
    <cell-wrapper
        v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
        :key="wrapperType"
        :wrapper-type="wrapperType"
        :style="{ backgroundColor: contentStyle.backgroundColor }"
    >
        <text-display-cell v-if="!isEdit" :text="formatValue" :columnConfig="columnsConfig" v-bind="contentStyle" />
        <a-space v-else>
            <a-input-number :value="rangeValue.min" @change="value => handleValueChange(value, rangeValue.max)" />
            -
            <a-input-number :value="rangeValue.max" @change="value => handleValueChange(rangeValue.min, value)" />
        </a-space>
    </cell-wrapper>
</template>

<script>
    import { computed, defineComponent, reactive, watch } from 'vue'
    import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue'
    import CellWrapper from '@/components/page/tableCell/cellWrapper.vue'
    import { addThousandsSeparatorToNumber } from '@/utils/index'
    export default defineComponent({
        components: {
            TextDisplayCell,
            CellWrapper
        },
        props: {
            // 当前单元格的值
            value: {
                type: Object,
                default: {
                    min: 0,
                    max: 0
                }
            },
            // 单元格的默认样式
            defaultStyle: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 单元格的条件样式配置
            conditionStyle: {
                type: Array,
                default: () => {
                    return []
                }
            },
            // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
            conditionValue: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 格式化配置
            format: {
                type: String,
                default: () => {
                    return ''
                }
            },
            // 当前列的配置
            columnsConfig: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 当前单元格是否处于编辑状态
            isEdit: {
                type: Boolean,
                default: () => {
                    return false
                }
            }
        },
        emits: ['change'],
        setup(props, { emit }) {
            // 内容显示的样式
            const contentStyle = computed(() => {
                let { iconType, icon, color, backgroundColor } = props.defaultStyle || {}
                return { iconType, icon, color, backgroundColor }
            })
            const rangeValue = reactive({
                min: 0,
                max: 0
            })
            const formatValue = computed(() => {
                const { min, max } = props.value

                if (props.format === 'THOUSANDS_SEPARATOR') {
                    return `${addThousandsSeparatorToNumber(min)} ~ ${addThousandsSeparatorToNumber(max)}`
                }

                return `${min} ~ ${max}`
            })
            watch(
                () => props.value,
                () => {
                    const { min, max } = props.value
                    rangeValue.min = min
                    rangeValue.max = max
                },
                { immediate: true, deep: true }
            )
            function handleValueChange(min, max) {
                emit('change', { min, max })
            }
            return {
                contentStyle,
                rangeValue,
                formatValue,
                handleValueChange
            }
        }
    })
</script>
